<div class="container order-view hidden-content" ng-model="order">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">Order Details</div>
                <ul class="list-group list-group-details accounts">
                    <li class="list-group-item">
                        <div class="account-username">
                            <div class="panel-heading">Order Id: <span
                                    class="panel-heading ng-binding">{{ order.orderId }}</span>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="account-number">
                            <div class="panel-heading">Order Status: <span
                                    class="panel-heading ng-binding">{{ order.orderStatus }}</span>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="default-account">
                            <div class="panel-heading">Account Number: <span
                                    class="panel-heading ng-binding">{{ order.accountNumber }}</span>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="default-account">
                            <div class="panel-heading">Order Date: <span
                                    class="panel-heading ng-binding">{{ order.createdAt | date:"MM/dd/yyyy 'at' h:mma" }}</span>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="default-account">
                            <div class="panel-heading">Order Total: <span
                                    class="panel-heading ng-binding">{{ order.total | currency }}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-md-12 panel-head-list">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">Ordered Items</div>

                <ul class="list-group list-group-details shopping-cart">
                    <li class="list-group-item" ng-if="order.lineItems.length == 0">
                        Your order is empty
                    </li>
                    <li ng-repeat="item in order.lineItems" class="list-group-item">
                        <div class="row">
                            <div class="col-md-2 col-xs-2 cart-item-image">
                                <div class="thumbnail">
                                    <a href="index.html#/products/{{item.productId}}">
                                        <img alt="{{item.name}}" src="/assets/img/posters/{{item.productId}}.png"/>
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-4 cart-item-description">
                                <div class="row">
                                    <div class="col-md-12"><label>Name:</label>{{item.name}}</div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12"><label>Product:</label>{{item.productId}}</div>
                                </div>
                            </div>
                            <div class="col-md-3 col-xs-3 cart-item-price"><label>Unit Price:</label>{{item.price
                                |
                                currency}}
                            </div>
                            <div class="col-md-3 col-xs-3 cart-item-price"><label>Quantity:</label>{{item.quantity}}
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-md-12 panel-head-list">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading"><i class="fa fa-home icon-head"></i>Shipping Address</div>
                <ul class="list-group list-group-details accounts">
                    <li class="list-group-item">
                        <div>
                            <div class="panel-heading">Street 1: <span
                                    class="panel-heading ng-binding">{{ order.shippingAddress.street1 }}</span>
                            </div>
                        </div>
                        <div ng-if="order.shippingAddress.street2 != ''">
                            <div class="panel-heading">Street 2: <span
                                    class="panel-heading ng-binding">{{ order.shippingAddress.street2 }}</span>
                            </div>
                        </div>
                        <div>
                            <div class="panel-heading">City: <span
                                    class="panel-heading ng-binding">{{ order.shippingAddress.city }}</span>
                            </div>
                        </div>
                        <div>
                            <div class="panel-heading">State: <span
                                    class="panel-heading ng-binding">{{ order.shippingAddress.state }}</span>
                            </div>
                        </div>
                        <div>
                            <div class="panel-heading">Zip Code: <span
                                    class="panel-heading ng-binding">{{ order.shippingAddress.zipCode }}</span>
                            </div>
                        </div>
                        <div>
                            <div class="panel-heading">Country: <span
                                    class="panel-heading ng-binding">{{ order.shippingAddress.country }}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>